<template>
  <div class="vertical">
    <div
      class="component"
      v-for="(component, index) in vertical"
      :key="component"
    >
      <component :is="component" :index="index"></component>
    </div>
  </div>
</template>

<script setup name="vertical">
const props = defineProps({
  vertical: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits([])

function showDialog() {
  emit('showDialog', 'rank')
}
</script>

<style scoped lang="scss">
.vertical {
  width: 35%; // 464px;
  margin-top: 20px;
  img {
    height: 600px;
    width: 100%;
    max-width: 464px;
    border-radius: 10px;
  }
}
</style>
